<template>
    <div class="bannerList">
        <div class="head">
            <div v-if="title" style="font-size: 18px;font-weight: 900;">{{ title }}</div>
            <el-button
            type="primary"
            @click="form = {};editBannerShow = true">新增</el-button>
        </div>

        <div class="table">
            <el-table
            stripe
            :data="list"
            style="width: 100%">
                <el-table-column
                    prop="bannerId"
                    width="80px"
                    label="ID">
                </el-table-column>
                <el-table-column
                    label="图片">
                    <template slot-scope="scope">
                        <div>
                            <img width="200px" :src="scope.row.bannerSrc" alt="" v-if="scope.row.type.indexOf('banner') != -1">
                            <span v-else>{{ scope.row.bannerSrc }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="isType"
                    label="类型">
                    <template slot-scope="scope">
                        <el-tag
                        type="success"
                        disable-transitions>{{ getTypeTitle(scope.row.type) }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="title"
                    label="标题">
                </el-table-column>
                <el-table-column
                    prop="toPath"
                    label="跳转">
                </el-table-column>
                <el-table-column
                    width="400px"
                    label="操作">
                    <template slot-scope="scope">
                        <div>

                            <el-button
                            type="primary"
                            @click="form = scope.row;editBannerShow = true">编辑</el-button>

                            <el-button
                            :type="scope.row.status == 0 ? 'warning' : 'primary'"
                            @click="handleHide(scope.$index, scope.row)">
                                {{scope.row.status == 0 ? '禁用' : '启用'}}
                            </el-button>

                            <el-popconfirm
                            style="margin-left: 10px;"
                            icon="el-icon-info"
                            icon-color="red"
                            @confirm="handleDetele(scope.$index, scope.row)"
                            title="确定删除吗？"
                            >
                                <el-button slot="reference" type="danger">删除</el-button>
                            </el-popconfirm>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog
        :visible.sync="editBannerShow"
        width="600px">
            <div class="from">
                <el-form :model="form"
                label-width="80px">
                    <el-form-item label="标题">
                        <el-input v-model="form.title" placeholder="标题地址"></el-input>
                    </el-form-item>
                    <el-form-item label="图片">
                        <el-input v-model="form.bannerSrc" placeholder="图片链接"></el-input>
                    </el-form-item>
                    <el-form-item label="类型" v-if="!type">
                        <el-select v-model="form.type" placeholder="活动区域">
                            <el-option :label="item.title" :value="item.src" v-for="(item, index) in types" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="跳转">
                        <el-input v-model="form.toPath" placeholder="跳转地址"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editBannerShow = false">取 消</el-button>
                <el-button type="primary" @click="handleEdit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { bannerDel, editBanner, bannerStatus } from '@/api/banner';

export default {
    props : {
        list : {
            type : Array,
            default : [],
        },
        isType : {
            type : Boolean,
            default : true,
        },
        title : {
            type : String,
            default : undefined,
        },
        type : {
            type : String,
            default : undefined,
        }
    },
    data() {
        return {
            editBannerShow : false,
            form : {},
            types : [
                {
                    title : '音乐轮播图',
                    src : 'banners_song'
                },
                {
                    title : '音乐菜单栏',
                    src : 'menus_song'
                },
                {
                    title : '书籍轮播图',
                    src : 'banners_book'
                },
                {
                    title : '书籍菜单栏',
                    src : 'menus_book'
                },
            ]
        }
    },
    created(){
    },
    methods : {

        getTypeTitle(str){
            for (let index = 0; index < this.types.length; index++) {
                const element = this.types[index];
                if(element.src == str){
                    return element.title
                }
            }
            return '暂无'
        },

        handleEdit(){

            if(!this.form.type){
                this.$message.warning('请选择类型')
                return
            }else if(!this.form.bannerSrc){
                this.$message.warning('请输入图片链接')
                return
            }

            this.editBannerShow = false
            this.form.type = this.type
            editBanner(this.form).then(res => {
                if(res.code == 200){
                    this.$emit('editBanner', this.list, res.data)
                    this.$message.success('操作成功')
                }
            })
        },
        handleDetele(index, data){
            bannerDel({
                id : data.bannerId
            }).then(res => {
                if(res.code == 200){
                    this.list.splice(index, 1);
                    this.$message.success('操作成功')
                }
            })
        },
        handleHide(index, data){
            bannerStatus({
                id : data.bannerId
            }).then(res => {
                if(res.code == 200){
                    data.status = data.status == 0 ? 1 : 0
                    this.$message.success('操作成功')
                }
            })
        },

    }
}
</script>

<style lang="less" scoped>
.bannerList{
    width: 100%;
    background-color: #fff;
    .head{
        display: flex;
        align-items: center;
        padding: 10px 30px;
        div{
            margin: 0 20px;
        }
    }
    .table{
        padding: 30px;
    }

    .from{

    }

    .dialog-footer{
        display: flex;
        justify-content: center;
    }
}
</style>